function nl2br (str, is_xhtml) {   
  var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

(function($) {
  $.fn.newsletter = function(options) {
    //Set the default values, use comma to separate the settings, example:
    var defaults = {
        //clave: 'valor',
    }
    
    var options =  $.extend(defaults, options);    


    $(".pw-sortable").sortable({
      opacity: 0.5,
      //revert: true,
      placeholder: "drag-placeholder",
      forcePlaceholderSize: true,
      stop: function(event, ui) { $('.to-save').click(); }
    });    


    $('.to-cancel').on('click',function(event) {
      event.preventDefault();
      
      // volvemos al estado anterior
      options.state.replaceWith(options.cancelState);
      
      // ocultamos el editor y mostramos los botones de accion
      jQuery("#edit_block").fadeOut();
    });


    $("#finish_newsletter").click(function(event) {
      event.preventDefault();
      
      var $newsletter = $("#newsletter");
      $newsletter.find(".pw-blocktype").remove();
      $newsletter.find(".pw-block-action").remove();
      $newsletter.find(".pw-block-content").unwrap();
      
      $("#newsletter_content").val($newsletter.html());
      $("#newsletter_form").submit();
    });
    
    return this.each(function() {

      $(this).find(".pw-action-remove").live("click", function(event) {
        event.preventDefault();

        var $blockAction = $(this).parent().parent();
        $blockAction.fadeOut(function () {
          $(this).remove();
          $('.to-save').click();
        });
      });      



      
      $(this).find(".pw-action-blocktype").live("click", function(event) {
        event.preventDefault();

        // clonamos el bloque que corresponde al blocktype que queremos usar como plantilla
        var newElement = $(this.rel).children().clone();

        // obtenemos el pw-block
        $pw_block = $(this).parent().parent();
        
        // agregamos el nuevo elemento al repetidor y lo mostramos
        $appenned = $pw_block.after(newElement);
        newElement.fadeIn();
        
        // preparamos algunos atributos para facilitar la relacion con otros objetos
        var count_blocks = new Date().getTime();
        var count_components = new Date().getTime();
        
        var $block_content = newElement.find(".pw-block-content");        
        $block_content.attr("id","pw-block-content-"+count_blocks);
        
        var $block_action = newElement.find(".pw-block-action");
        $block_action.attr("rel","#pw-block-content-"+count_blocks);

        var $components = newElement.find(".pw-component");
        $components.each( function() {
          $(this).attr("id","pw-component-"+count_components);
          count_components++;
        });

        $('.to-save').click();
        
      });



      
      $(this).find(".pw-action-edit").live("click", function(event) {
        event.preventDefault();

        var $blockAction = $(this).parent();

        // guardamos la referencia anterior por si el usuario cancela la edición
        options.state = $($blockAction).prev();

        $("#components").empty();
        $("#edit_block").fadeIn();

        
        options.state.find(".pw-component").each(function(index) {
        
          var $component = $(this);

          /*
           * LINE
           */
          if ($component.hasClass("pw-line")) {
            var $pwLine = $("#components").append('<div class="control-group component"><label>'+$component.attr("title")+'</label><input class="pw-line" value="" rel="#'+$component.attr("id")+'" /></div>');
                $pwLine = $pwLine.find("[rel='#"+$component.attr("id")+"']");
            
            // ponemos el texto del titulo dentro del componente recien creado
            $pwLine.val($component.html());
            
            // nos guardamos una copia del objeto anterior
            options.cancelState = options.state.clone();
            
            
            $pwLine.keyup(function() {
              $($pwLine.attr("rel")).html($pwLine.val());
            });

            $pwLine.change(function() {
              $($pwLine.attr("rel")).html($pwLine.val());
            });

          } // line
          
          /*
           * MULTILINE
           */
          if ($component.hasClass("pw-multiline")) {
            var $pwMultiline = $("#components").append('<div class="control-group component"><label>'+$component.attr("title")+'</label><textarea class="pw-multiline" rel="#'+$component.attr("id")+'"></textarea></div>');
                $pwMultiline = $pwMultiline.find("[rel='#"+$component.attr("id")+"']");

            // ponemos el texto del titulo dentro del componente recien creado
            $pwMultiline.html($component.html().replace(/<br>/g,""));

            // nos guardamos una copia del objeto anterior
            options.cancelState = options.state.clone();
            
            $pwMultiline.keyup(function() {
              $($pwMultiline.attr("rel")).html(nl2br($pwMultiline.val()));
            });

            $pwMultiline.change(function() {
              $($pwMultiline.attr("rel")).html(nl2br($pwMultiline.val()));
            });
          } // multi

          /*
           * IMAGE
           */
          if ($component.hasClass("pw-image")) {
            var $pwImage = $("#components").append('<div class="control-group component"><label>'+$component.children().attr("title")+'</label><input class="pw-image" value="" rel="#'+$component.attr("id")+'" /></div><div id="file-uploader"></div>');
                $pwImage = $pwImage.find("[rel='#"+$component.attr("id")+"']");
            
            // ponemos el source de la imagen en el input recien creado
            $pwImage.val($component.children().attr("src")); 
            
            // nos guardamos una copia del objeto anterior
            options.cancelState = options.state.clone();

            // Con $($pwImage.attr("rel")) obtengo el span(padre) que contiene la imagen que quiero modificar

            $pwImage.keyup(function() {
              $($pwImage.attr("rel")).children().attr("src",$pwImage.val());
            });

            $pwImage.change(function() {
              $($pwImage.attr("rel")).children().attr("src",$pwImage.val());
            });

            makeUploader({
              'filename': $($pwImage.attr("rel")).attr("id"), // pw-component-i
              'width':    $($pwImage.attr("rel")).find("img").attr("width"),
              'height':   $($pwImage.attr("rel")).find("img").attr("height")
            });
                        
          } // image
          
          /*
           * LINK
           */
          if ($component.hasClass("pw-link")) {
            var $pwLink = $("#components").append('<div class="control-group component"><label>'+$component.children().attr("title")+'</label><input class="pw-link" value="" rel="#'+$component.attr("id")+'" /><input class="pw-link" value="" rel="#'+$component.attr("id")+'" /></div>');
                $pwLink = $pwLink.find("[rel='#"+$component.attr("id")+"']");
            
            /* 
             * $pwLink contiene 2 objetos input, el primero lo usamos para
             * modificar el Texto del A, y el segundo(ultimo) lo usamos
             * para modificar el href del A. 
             * Le asignamos los valores actuales segun corresponda
             */
            $pwLink.first().val($component.children().html()); 
            $pwLink.last().val($component.children().attr("href"));             

            // nos guardamos una copia del objeto anterior
            options.cancelState = options.state.clone();

            // Con $($pwLink.attr("rel")) obtengo el span(padre) que contiene el A que quiero modificar

            $pwLink.keyup(function() {
              $($pwLink.attr("rel")).children().html($pwLink.first().val());              
              $($pwLink.attr("rel")).children().attr("href",$pwLink.last().val());
            });

            $pwLink.change(function() {
              $($pwLink.attr("rel")).children().html($pwLink.first().val());              
              $($pwLink.attr("rel")).children().attr("href",$pwLink.last().val());
            });
            
          } // link

        }); // .each()
                
      }); // .click edit()

    }); // plugin each
  }; // plugin options
})(jQuery);
